<div class="layui-fluid" id="app-vue" lay-title="系统设置">
    <div class="layui-card">

        <div class="layui-card-body nepadmin-pad30">
            <div class="layui-row layui-col-space30">

                <div class="layui-col-sm3" v-for="(item,index) in setting_list" :key="index">
                    <div class="config-item " :class="item.bg_color">
                        <div class="tip-container">
                            <div class="config-item-icon-container"
                                 style="margin-top: 30px; position: relative; display: flex;">
                                <div class="item-icon-1"><img :src="item.bg_img"></div>
                                <div class="item-icon-2"></div>
                            </div>
                            <div class="config-title">
                                <span class="nepadmin-linecard-text">{{item.title}}</span>
                            </div>
                            <div class="config-tip ellipsis-item">{{item.sub_title}}</div>
                            <div class="config-message ellipsis-item">{{item.intro}}</div>
                        </div>
                        <div class="set-container">
                            <div class="config-item-leaf-container">
                                <div class="item-leaf-1">
                                    <div class="leaf leaf-11"></div>
                                    <div class="leaf leaf-12"></div>
                                    <div class="leaf leaf-13"></div>
                                </div>
                                <div class="item-leaf-2">
                                </div>
                            </div>
                            <div class="config-item-btn display-flex-c" @click="handleSetting(item)">立即设置</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <el-dialog
                :title="title"
                :append-to-body="true"
                :close-on-click-modal="false"
                :visible.sync="dialogVisible"
                top="1vh"
                width="95%"
        >

            <el-form ref="form"  v-loading="formLoading" :label-width="config_item.mode=='table'?'120px':'180px'">
                <el-form-item   :label="item.name" :prop="item.field" v-for="(item,index) in get_config_list" :key="index">

                    <file-upload
                        v-if="item.input=='file'"
                        ref="el-upload"
                        class="avatar-uploader"
                        file-type="system"
                        :upload-success="(res)=>onUploadSuccess(res,item)"
                    >

                        <img v-if="item.value" :src="item.value" fit="fit" class="avatar" >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </file-upload>


                    <!--  选项组   -->
                    <el-radio-group v-model="item.value" v-else-if="item.input=='radio'" >
                        <el-radio :label="radio_item.value" v-for="(radio_item,radio_index) in item.group" :key="radio_index">{{radio_item.name}}</el-radio>
                    </el-radio-group>
                    <!--  文本框   -->
                    <el-input v-else :type="item.input" :rows="item.rows||5" v-model="item.value" :readonly="item.readonly===true" ></el-input>
                    <div class="layui-text helper-text" v-html="item.help_content">{{item.help_content}}</div>
                </el-form-item>
                <el-form-item v-if="config_item.mode=='table'">
                    <el-table :data="get_config_table_list" border >
                        <el-table-column :label="item.name" :width="item.input=='table'?600:140" v-for="(item,index) in get_config_table_col" :key="index">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row[item.key]" placeholder="请选择" v-if="item.input=='select'">
                                    <el-option
                                            v-for="(select,select_key) in item.selectList"
                                            :key="select_key+''"
                                            :label="select.name"
                                            :value="select_key+''">
                                    </el-option>
                                </el-select>
                                <el-table :data="scope.row[item.key]" border  v-else-if="item.input=='table'">
                                    <el-table-column :label="tabItem.name" :prop="tabItem.key" v-for="(tabItem,tabIndex) in item.tableList" :key="tabIndex" width="110">
                                        <template slot-scope="tableScope">
                                            <el-input  v-model="tableScope.row[tabItem.key]" :readonly="tabItem.readonly===true" ></el-input>
                                        </template>
                                    </el-table-column>

                                </el-table>

                                <el-input :type="item.input||'text'" v-else v-model="scope.row[item.key]" :readonly="item.readonly===true"></el-input>

                            </template>
                        </el-table-column>

                    </el-table>
                </el-form-item>



            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit" v-loading="submitLoading">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</div>


<script>
    layui.extend({

    }).use(['admin','layer','view','conf','jquery','fileUpload'], function (admin,layer,view,conf,$,fileUpload) {

        var app = new Vue({
            el: '#app-vue',
            data: {
                img:'',
                title:'',
                config_item : {},

                upload_info:{},
                formLoading:false,
                submitLoading:false,
                dialogVisible:false,
                setting_list:[
                    {title:'平台信息',sub_title:'配置平台基本信息',intro:'其他信息、Logo',bg_img:'/admin-temp/nepadmin/images/shopro-icon.png',bg_color:'bg-gradual-cyan',config_item:{
                        type:'normal',
                        list:[
                            {name:'默认标题',help_content:'',value:'',field:'def_title',input:'text'},
                            {name:'客服邮箱',help_content:'',value:'',field:'email',input:'text'},
                            {name:'客服电话',help_content:'',value:'',field:'custom_tel',input:'text'},

                            {name:'热门搜索地址',help_content:'多个使用逗号分割 示例: 北京,深圳',value:'',field:'hot_location_comma',input:'textarea'},
                            // {name:'热门搜索关键字',help_content:'多个使用逗号分割 示例: 热门1,热门2',value:'',field:'hot_keyword_comma',input:'textarea'},

                            // {name:'meta desc',help_content:'',value:'',field:'platform_description',input:'text'},
                            // {name:'meta key',help_content:'',value:'',field:'platform_keyword',input:'text'},
                            // {name:'copyright',help_content:'',value:'',field:'copyright',input:'textarea'},
                    ]}},


                ],
            },
            components:{
                "file-upload":fileUpload,
            },
            computed:{
                get_config_list:function(){
                    return this.config_item.list||[]
                },
                get_config_table_list:function(){
                    return this.config_item.table_list||[]
                },
                get_config_table_col:function(){
                    return this.config_item.table_col||[]
                },
                get_upload_data:function (){
                    const upload_info_data = this.upload_info.data||{};
                    return Object.assign(upload_info_data,{type:'system'})
                }
            },
            created:function() {
                // this.getUploadInfo()
            },
            methods: {
                //初始化图片上传
                // getUploadInfo:function(){
                //     const that = this
                //     admin.uploadInfo({},function(upload_info){
                //         that.upload_info = upload_info
                //     })
                // },
                handleSetting:function(item){

                    this.config_item = item.config_item || {}
                    this.title = item.title
                    this.dialogVisible = true
                    this.submitLoading = false
                    this.formLoading = false
                    this.handleGetSetting()
                },
                handleInputChange:function (e,item){
                    console.log(e)
                    item.value = e
                },
                //获取配置信息
                handleGetSetting:function(){
                    const content = {}
                    const that = this
                    this.get_config_list.map(function(item){
                        content[item.field] = item.value
                    })
                    this.formLoading = true
                    admin.post({
                        url:'/admin/system/setting',
                        data:{
                            type:this.config_item.type,
                            table_type:this.config_item.table_type||"",
                            content:content
                        },
                        success:function(res){
                            const data = res.data
                            console.log(data)
                            if(data.table_col){
                                that.config_item.table_col = data.table_col
                            }
                            if(data.table_list){
                                that.config_item.table_list = data.table_list
                            }

                            that.get_config_list.map(function(item){
                                if(data[item.field]){
                                    item.value = data[item.field]
                                }
                            })

                        },
                        complete:function(){
                            that.formLoading = false
                            console.log('complete:function')

                        }
                    })
                },
                //保存配置信息
                handleSubmit:function(){
                    //构造数据
                    const that = this
                    var table_content = null
                    var content = {}

                    if(this.config_item.table_col){
                        table_content = this.config_item.table_list
                    }

                    this.get_config_list.map(function(item){
                        content[item.field] = item.value
                    })
                    // if(!Object.keys(content).length){
                    //     that.$message({ message: '配置内容不能为空项', type: 'error' });
                    //     return false;
                    // }

                    this.submitLoading = true
                    admin.post({
                        url:'/admin/system/settingSave',
                        data:{
                            table_type:this.config_item.table_type,
                            type:this.config_item.type,
                            table_content:table_content,
                            content:content,
                        },
                        success:function(res){
                            that.$message({ message: res.msg, type: 'success' });
                        },
                        complete:function(){
                            console.log('complete:function')
                            that.submitLoading = false

                        }
                    })
                },
                onUploadSuccess:function(res,item){
                    console.log('onUploadSuccess',res,item)
                    const data = res.data||{}
                    //上传对象
                    // const item = this.$refs['el-upload'][0].$attrs.obj
                    if(res.code!==1){
                        this.$message({ message: res.msg, type: 'error' });
                    }else{
                        item.value = data.key||''
                    }
                }


            }
        })
    })
</script>